<div class="control-group vis-option-group vis-option-type-number label-{valign||def.valign}">
    {#if label}
    <label style="width:{width||def.width};" class="control-label {disabled ? 'disabled' : ''}">{@html label }</label>
    {/if}
    <div class="controls" style="width: calc(100% - {width||def.width} - 40px);">
        <slot />
        {#if help}
        <p class="mini-help">{@html help}</p>
        {/if}
    </div>
</div>

<style lang="less">
    p.mini-help {
        margin-top: -8px;
    }
    label.control-label {
    }
    label.disabled {
        color: #999;
    }
    .control-group.label-middle {
        label.control-label {
            vertical-align: middle;
        }
        .control-group {
            vertical-align: middle;
        }
    }
    .control-group.label-baseline {
        label.control-label {
            vertical-align: baseline;
        }
        .control-group {
            vertical-align: baseline;
        }
    }
    .control-group.label-top {
        label.control-label {
            vertical-align: top;
            position: relative;
            top: 2px;
        }
        .control-group {
            vertical-align: top;
        }
    }
</style>

<script>
    export default {
        helpers: {
            def: {
                width: '100px',
                valign: 'baseline'
            }
        }
    };
</script>
